<template>
  <div>
    <p>插件名称：driver.js</p>
    <p>
      文档地址：
      <a
        href="https://github.com/kamranahmedse/driver.js"
        target="_blank"
      >https://github.com/kamranahmedse/driver.js</a>
    </p>

    <el-button
      type="primary"
      @click.prevent.stop="guide"
    >
      引导页
    </el-button>
  </div>
</template>

<script setup lang="ts">
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css'

const driver = new Driver()

const guide = () => {
  driver.defineSteps([
    {
      element: '#fold',
      popover: {
        title: 'Fold',
        description: '折叠/展开左侧菜单栏',
        position: 'bottom'
      }
    },
    {
      element: '#language',
      popover: {
        title: 'Language',
        description: '国际化语言',
        position: 'left'
      }
    },
    {
      element: '#skin',
      popover: {
        title: 'Skin',
        description: '一键换肤',
        position: 'left'
      }
    },
    {
      element: '#mine',
      popover: {
        title: 'Mine',
        description: '个人中心信息',
        position: 'left'
      }
    }
  ])
  driver.start()
}
</script>

<style lang="scss" scoped>

</style>
